﻿@page "/GridVirtualScrolling"
@inject ProductService ProductService
@inject IProductCategoriesProvider CategoriesProvider

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridPagingAndScrolling#VirtualScrolling" />Virtual Scrolling</h2>

    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.DataNavigationMode">DataNavigationMode</a> property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridNavigationMode">VirtualScrolling</a> to enable virtual scrolling in our Data Grid.
        The Data Grid loads and renders only the data rows that become visible. Note that this mode requires that all rows have the same height.
    </p>
    <p>
        In this mode, the Data Grid does not display the pager and opens the Edit Form in a pop-up window.
    </p>
</div>

@if (DataSource == null || NestedDataSource == null) {
    <p><em>Loading...</em></p>
} else {
    <DxDataGrid Data="@DataSource"
                DataNavigationMode="DataGridNavigationMode.VirtualScrolling"
                RowRemoving="@((dataItem) => OnRowRemoving(dataItem))"
                RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
                RowInserting="@((newValues) => OnRowInserting(newValues))"
                CssClass="mw-1100">

        <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>

        <DxDataGridColumn Field="@nameof(Product.Id)" Caption="ID" Width="50px">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductName)" Caption="Product Name">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability" Width="85px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as Product).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
            <EditTemplate>
                <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                            Value="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                            ValueChanged="@((string newCellValue) => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
                </DxComboBox>
            </EditTemplate>
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductCategoryId)" Caption="Category">
            <DisplayTemplate>
                @{
                    var item = NestedDataSource.Where(x => x.SubcategoryID == (int)((context as Product).ProductCategoryId)).FirstOrDefault();
                    string category = item != null ? item.Category.ToString() : "none";
                    string subcategory = item != null ? item.Subcategory : "none";
                    <span>@category/@subcategory</span>
                }
            </DisplayTemplate>
            <EditTemplate>
                <DxComboBox Data="@NestedDataSource"
                            TextFieldName="CategorySubcategory"
                            Value="@(NestedDataSource.Where(x => x.SubcategoryID == (int)((CellEditContext)context).CellValue).FirstOrDefault())"
                            ValueChanged="@((ProductCategory newCellValue) => ((CellEditContext)context).OnChanged(newCellValue.SubcategoryID))">
                </DxComboBox>
            </EditTemplate>
        </DxDataGridColumn>

    </DxDataGrid>

    <CodeSnippet_GridVirtualScrolling></CodeSnippet_GridVirtualScrolling>
}

@code {
    IEnumerable<Product> DataSource;
    IEnumerable<ProductCategory> NestedDataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await ProductService.LoadAsync();
        NestedDataSource = await CategoriesProvider.GetProductCategoriesAsync();
    }

    void OnRowRemoving(Product dataItem)
    {
        ProductService.RemoveAsync(dataItem);
    }
    void OnRowUpdating(Product dataItem, Dictionary<string, object> newValue)
    {
        ProductService.UpdateAsync(dataItem, newValue);
    }
    void OnRowInserting(Dictionary<string, object> newValue)
    {
        ProductService.InsertAsync(newValue);
    }
}
